<template>
  <div>
    <el-row :gutter="20" class="mgb20">
      <el-col :span="6">
      <el-card >
        <div class="grid-content">
          <div class="grid-cont-content">
        <div class="grid-num">{{ getConsumerCount }}</div>
        <div>用户总数</div>
        </div>
        </div>
      </el-card>
      </el-col>
      <el-col :span="6">
        <el-card >
          <div class="grid-content">
            <div class="grid-cont-content">
              <div class="grid-num">{{ getSingerCount }}</div>
              <div>歌手总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card >
          <div class="grid-content">
            <div class="grid-cont-content">
              <div class="grid-num">{{ getSongCount }}</div>
              <div>歌曲总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card >
          <div class="grid-content">
            <div class="grid-cont-content">
              <div class="grid-num">{{ getSongListCount }}</div>
              <div>歌单总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mgb20">
      <el-col :span="12">
      <h3 style="text-align: center" class="mgb20">用户性别比例</h3>
        <div style="background-color: white">
          <ve-pie :data="consumerSex"></ve-pie>
        </div>
      </el-col>
      <el-col :span="12">
        <h3 style="text-align: center" class="mgb20">歌曲类型比例</h3>
        <div style="background-color: white">
          <ve-ring :data="songStyle"></ve-ring>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mgb20">
      <el-col :span="12">
        <h3 style="text-align: center" class="mgb20">歌手性别比例</h3>
        <div style="background-color: white">
          <ve-pie :data="singerSex"></ve-pie>
        </div>
      </el-col>
      <el-col :span="12">
        <h3 style="text-align: center" class="mgb20">歌手国籍比例</h3>
        <div style="background-color: white">
          <ve-ring :data="country"></ve-ring>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Info",
  data() {
    return {
      consumer: [],
      singer: [],
      song: [],
      songList: [],
      //按性别分类的用户
      consumerSex: {
        columns: ['性别', '总数'],
        rows: [
          {'性别': '男', '总数': 0},
          {'性别': '女', '总数': 0}
        ]
      },
      //按歌单风格分类
      songStyle: {
        columns: ['风格', '总数'],
        rows: [
          {'风格': '民谣', '总数': 0},
          {'风格': '华语', '总数': 0},
          {'风格': '粤语', '总数': 0},
          {'风格': '欧美', '总数': 0},
          {'风格': '日韩', '总数': 0},
          {'风格': 'BGM', '总数': 0},
          {'风格': '轻音乐', '总数': 0},
          {'风格': '乐器', '总数': 0}
        ]
      },
      //按性别分类的歌手数
      singerSex: {
        columns: ['性别', '总数'],
        rows: [
          {'性别': '女', '总数': 0},
          {'性别': '男', '总数': 0},
          {'性别': '组合', '总数': 0},
          {'性别': '不明', '总数': 0}
        ]
      },
      //按国籍分类
      country: {
        columns: ['国籍', '总数'],
        rows: [
          {'国籍': '中国', '总数': 0},
          {'国籍': '韩国', '总数': 0},
          {'国籍': '日本', '总数': 0},
          {'国籍': '美国', '总数': 0},
          {'国籍': '新加坡', '总数': 0},
          {'国籍': '意大利', '总数': 0},
          {'国籍': '马来西亚', '总数': 0},
          {'国籍': '西班牙', '总数': 0}
        ]
      }
    }
  },
  methods: {
    //获取所有用户
    async getAllConsumer() {
      let result = await this.$API.reqShowAllConsumer()
      if (result.code == 10000) {
        this.consumer = result.data
        this.consumerSex.rows[0]['总数'] = this.getSexNum(1, this.consumer)
        this.consumerSex.rows[1]['总数'] = this.getSexNum(0, this.consumer)
      } else {
        await Promise.reject(new Error('fail'))
      }
    },
    //获取男女性别个数
    getSexNum(sex, val) {
      let count = 0
      for (let item of val) {
        if (sex == item.sex) {
          count++
        }
      }
      return count
    },
    //获取所有歌手
    async getAllSinger() {
      let result = await this.$API.reqShowAllSinger()
      if (result.code == 10000) {
        this.singer = result.data
        this.singerSex.rows[0]['总数'] = this.getSexNum(0, this.singer);
        this.singerSex.rows[1]['总数'] = this.getSexNum(1, this.singer);
        this.singerSex.rows[2]['总数'] = this.getSexNum(2, this.singer);
        this.singerSex.rows[3]['总数'] = this.getSexNum(3, this.singer);
        for (let item of this.singer) {
          this.getCountryNum(item.location);
        }
      } else {
        await Promise.reject(new Error('fail'))
      }
    },
    //获取所有歌曲
    async getAllSong() {
      let result = await this.$API.reqShowAllSong()
      if (result.code == 10000) {
        this.song = result.data
      } else {
        await Promise.reject(new Error('fail'))
      }
    },
    //获取所有歌单
    async getAllSongList() {
      let result = await this.$API.reqShowAllSongList()
      if (result.code == 10000) {
        this.songList = result.data
        for (let item of this.songList) {
          this.getSongListStyleNum(item.style);
        }
      } else {
        await Promise.reject(new Error('fail'))
      }
    },
    //获取歌曲风格个数
    getSongListStyleNum(style) {
      for (let item of this.songStyle.rows) {
        if (style.includes(item['风格'])) {
          item['总数']++;
        }
      }
    },
    //根据国籍获取数量
    getCountryNum(location) {
      for (let item of this.country.rows) {
        if (location.includes(item['国籍'])) {
          item['总数']++;
        }
      }
    }
  },
    computed: {
      //计算用户综述
      getConsumerCount() {
        return this.consumer.length
      },
      getSingerCount() {
        return this.singer.length
      },
      getSongCount() {
        return this.song.length
      }
      ,
      getSongListCount() {
        return this.songList.length
      }
    },
    mounted() {
      this.getAllConsumer()
      this.getAllSinger()
      this.getAllSong()
      this.getAllSongList()
    }
  }
</script>

<style scoped>
.grid-content{
  display: flex;
  align-items: center;
  height: 50px;
}
.grid-cont-content{
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: darkgray;
}
.grid-num{
  font-size: 30px;
  font-weight: bold;
}
</style>
